<template>
  <view class="py-15 px-10 disFlxJS" style="border-top: solid 1px #dddddd">
    <view
      v-if="item.setting && item.setting.openSubscribe == 1"
      style="width: 33.33%"
      class="disFlxCC"
    >
      <view
        @click.stop="loginGo(`/pagesC/reserveExp/index?expertId=${item.id}`)"
        class="disFlxAC btn1 btn2"
      >
        <u-image
          src="@/static/image/image220701(10).png"
          width="32rpx"
          height="32rpx"
        ></u-image>
        <text class="pl-2">预约咨询</text>

        <view v-if="item.isPrePlan" class="btnBadge">
          <u-badge type="error" value="有号" shape="horn"></u-badge>
        </view>
      </view>
    </view>
    <view v-if="showImConsult" style="width: 33.33%" class="disFlxCC">
      <view
        @click.stop="
        loginGo(`/pagesB/TUI-Chat/chat?conversationID=C2C${item.id}`)
        "
        class="disFlxAC btn1"
      >
        <u-image
          src="@/static/image/image220701(11).png"
          width="32rpx"
          height="32rpx"
        ></u-image>
        <text class="pl-2">图文咨询</text>
      </view>
    </view>
    <view v-if="item.setting && item.setting.openImmediately == 1" style="width: 33.33%" class="disFlxCC">
      <view
        @click.stop="callNow(item)"
        class="disFlxAC btn1 btn3"
        :class="{ filter: item.status == 0 || item.status == 1 }"
      >
        <u-image
          src="@/static/image/image220701(9).png"
          width="32rpx"
          height="32rpx"
        ></u-image>
        <text class="pl-2">即时咨询</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
    // 是否自定义即时咨询事件
    isCustomCell: {
        type: Boolean,
        default: false
    },
    // 是否显示图文咨询
    showImConsult: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    callNow(item) {
      if (item.status == 0 || item.status == 1) {
        return
      }
      this.loginGo(`/pagesC/consultInfo/index?expertId=${item.id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.disFlxJS {
  justify-content: flex-end;
}
.btn1 {
  border-radius: 26rpx;
  border: solid 1px #0d8bff;
  background-color: #ffffff;
  color: #0d8bff;
  width: 184rpx;
  justify-content: center;
  padding: 6rpx 0;
}
.btn1.btn2 {
  border: solid 1px #afa24b;
  background-color: #fffdf2;
  color: #afa24b;
}
.btn1.btn3 {
  border: solid 1px #00a471;
  background-color: #fffdf2;
  color: #00a471;
}
.filter {
  filter: grayscale(100%) opacity(0.8);
}
.btn2{
  position: relative;
  .btnBadge{
    position: absolute;
    top: -20rpx;
    right: -20rpx;
  }
}
</style>